<template>
    <h3>订单列表</h3>
    <el-table :data="orders" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column  label="客户" width="150">
            <template #default="scope">
                <div>
                   {{ scope.row.customer.firstName+"."+scope.row.customer.lastName}} 
              </div>
            </template>
            </el-table-column>
        <el-table-column prop="book.title" label="书名" width="300" />
        <el-table-column label="订购日期" width="200">
            <template #default="scope">
                <div>
                    {{ formatDate(scope.row.orderDate) }}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="quantity" label="订购数量" width="200" />
        <el-table-column prop="orderType" label="类型" width="200" />
    </el-table>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import axios from '../axios'

const orders = reactive([]);
onMounted(async () => {
    const resp=await axios.get("/api/orders")
    orders.push(...resp.data);
})
function formatDate(s) {
    const date = new Date(s);
    const formatDate = date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
    return formatDate;
}

</script>